<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="关键字">
        <el-input v-model="listQuery.searchKey" />
      </el-form-item>

      <el-form-item label="用户名称">
        <el-input v-model="listQuery.searchUserName" />
      </el-form-item>

      <el-form-item label="省市区查询" type="datetimerange">
        <div class="block" clear-icon>
          <areaSelect :data="listQuery"></areaSelect>
        </div>
      </el-form-item>

      <el-form-item label="搜索时间 ">
        <div class="block">
          <el-date-picker
            v-model="value"
            @change="change"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </div>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getList(1)">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-row class="form-pai">
      <el-button type="primary" @click="showRank">排行榜</el-button>

      <el-button type="primary" @click="showFenBuTu">全国分布图</el-button>
    </el-row>

    <mytable
      :data="list"
      ref="table"
      @getList="getList"
      :listQuery="listQuery"
      border
      style="width: 100%"
    >
      <el-table-column prop="searchKey" label="关键字" align="center"></el-table-column>
      <el-table-column prop="searchUserName" label="用户名称" align="center"></el-table-column>
      <el-table-column prop="searchTime" label="搜索时间" align="center"></el-table-column>
      <el-table-column prop="provinceName" label="省" align="center"></el-table-column>
      <el-table-column prop="cityName" label="市" align="center"></el-table-column>
      <el-table-column prop="countryName" label="区" align="center"></el-table-column>
    </mytable>

    <rank ref="rank"></rank>
    <searchFenBuTu ref="searchFenBuTu"></searchFenBuTu>
  </div>
</template>

<script>
import apigoodsSearchLog from "@/api/logManage/goodsSearchLog";
import Pagination from "@/components/Pagination";
import areaSelect from "@/views/component/areaSelect";
import mytable from "@/components/Table";
import searchFenBuTu from "./searchFenBuTu";

import rank from "./rank";
export default {
  name: "list",
  components: { Pagination, areaSelect, mytable, rank, searchFenBuTu },
  data() {
    return {
      list: [],
      listQuery: {
        searchKey: "", //
        startTime: "", //开始时间
        endTime: "" //结束时间
      },
      value: []
    };
  },
  created() {},
  methods: {
    //时间
    change(date) {
      if (date && date.length > 0) {
        this.listQuery.startTime = date[0];
        this.listQuery.endTime = date[1];
      } else {
        this.listQuery.startTime = "";
        this.listQuery.endTime = "";
      }
    },
    getList(pageNo) {
      //省市区
      this.listQuery.pageNo = pageNo || this.listQuery.pageNo;
      if (this.listQuery?.areaId?.length > 0) {
        this.listQuery.province = this.listQuery.areaId[0];
        this.listQuery.city = this.listQuery.areaId[1];
        this.listQuery.country = this.listQuery.areaId[2];
      } else {
        this.listQuery.province = "";
        this.listQuery.city = "";
        this.listQuery.country = "";
      }
      delete this.listQuery.areaId;

      console.log(this.listQuery.areaId);

      apigoodsSearchLog.query(this.listQuery).then(res => {
        console.log(res);

        this.$refs.table.load(res.list, res.total);
      });
    },

    showRank() {
      //显示排行榜弹出框
      this.$refs.rank.open();
    },

    showFenBuTu() {
      // 显示全国分布图
      this.$refs.searchFenBuTu.open();
    }
  }
};
</script>

<style scoped>
.form-pai {
  float: right;
  margin: 0px 0px 20px 0;
}
</style>